<template>
	<div class="flex_col_center" style="width: 100vw; height: 100vh; justify-content: center;">
		<div class="card flex_col" style="padding: 20px">
			<label class="flex_center_self">登陆</label>
			<div class="flex_row_center mt10">
				<label>账号:</label>
				<el-input v-model="ctx.account" clearable class="ml5" style="width: 300px;"/>
			</div>
			<div class="flex_row_center mt10">
				<label>密码:</label>
				<el-input show-password v-model="ctx.pwd" class="ml5" clearable style="width: 300px;"/>
			</div>
			<div class="flex_col_center" style="margin-top: 20px;">
				<el-button @click="onClickLogin" type="primary">登陆</el-button>
				<el-button @click="onClickTest">测试</el-button>
			</div>
			
		</div>
	</div>

</template>

<script lang="ts" setup>

import { getIpInfo } from '@/service/base';
import { login } from '@/service/user';
import { runAction } from '@/utils/ui';
import { reactive } from 'vue';

interface LoginCtx {
	account: string,
	pwd: string,
}

const ctx = reactive<LoginCtx>({
	account: '',
	pwd: ''
});

const onClickTest = async () => {
	runAction('测试', '测试', async () => {
		const info = await getIpInfo('120.241.44.122');
		console.log(info);
	});
}

const onClickLogin = async () => {
	runAction('登陆', '登陆中', async () => {
		if (ctx.account.length == 0) {
			throw '请输入用户名';
		}
		if (ctx.pwd.length == 0) {
			throw '请输入密码';
		}
		const res = await login({
			account: ctx.account,
			pwd: ctx.pwd
		});
		console.log(res);
	});
};

</script>
